<template>
  <ul class="fx-tree-item">
    <li class="fx-tree-content" v-for="item in data" :key="item.fxTreeId">
      <div class="tree-text" @click="treeClick(item)">
        <em class="mr10">
          <i class="fx-select-dropdown" :class="{active:item.showChildren}" v-if="item.children&&item.children.length"/>
        </em>
        <fx-checkbox v-model="item.checked" v-if="isChecked" class="checkbox" @click.stop="checkClick(item)">
          <template #icon>
            <i class="iconfont icon-check fs10" v-if="isCheckedIcon(item)"/>
            <i class="iconfont icon-more fs10" v-else/>
          </template>
        </fx-checkbox>
        <span>{{ item.label }}</span>
      </div>
      <fx-transition-unfold>
        <template v-if="item.children&&item.children.length">
          <fx-tree-item v-show="item.showChildren" :data="item.children" :is-checked="isChecked"/>
        </template>
      </fx-transition-unfold>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import { TreeData } from '@/base/tree/tree.vue'

interface TreeProps {
  data: TreeData[];
  defaultExpandedKeys: Array<string | number>;
  defaultCheckedKeys: Array<string | number>;
  isChecked: boolean;
}

export default defineComponent({
  name: 'FTreeItem',
  props: {
    // 树数据
    data: {
      type: Array as PropType<TreeData[]>,
      required: true
    },
    // 默认展开
    defaultExpandedKeys: {
      type: Array as PropType<Array<string | number>>,
      default: null
    },
    // 默认选中
    defaultCheckedKeys: {
      type: Array as PropType<Array<string | number>>,
      default: null
    },
    // 是否需要选中按钮
    isChecked: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup (props: TreeProps) {
    // 当前选中
    const currentCheckedKeys = ref<Array<string | number>>(props.defaultCheckedKeys)
    watch(() => props.data, (val: TreeData[]) => {
      val.forEach((item: TreeData) => {
        if (item.children && item.children.length) {
          item.checked = item.children.some((item: TreeData) => item.checked)
          item.checkedAll = item.children.every((item: TreeData) => item.checked)
        }
      })
    }, { deep: true })
    // 点击事件
    const treeClick = (data: TreeData): void => {
      if (data.children && data.children.length) {
        data.showChildren = !data.showChildren
      }
    }
    const checkChildren = (arr: TreeData[], isChecked: boolean): void => {
      arr.forEach((item: TreeData) => {
        item.checked = isChecked
        if (item.children && item.children.length) {
          checkChildren(item.children, isChecked)
        }
      })
    }
    // change回调
    const emitChange = (arr: TreeData[] = props.data) => {
      arr.forEach((item: TreeData) => {
        if (item.checked && !item.children?.length) {
          currentCheckedKeys.value.push(item.id)
        } else if (item.children && item.children.length) {
          emitChange(item.children)
        }
      })
    }
    // 选中点击
    const checkClick = (data: TreeData): void => {
      if (data.children && data.children.length) {
        checkChildren(data.children, !data.checked)
      }
      emitChange()
    }
    // 是否选中
    const isCheckedIcon = (data: TreeData): boolean => {
      return !!data.checkedAll
    }

    return {
      treeClick,
      checkClick,
      isCheckedIcon
    }
  }
})
</script>
